<!-- 分类三级 -->
<template>
  <div class="sub">
    <!-- 面包屑导航 -->
    <div class="container sub-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home/rabbit' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: categoryPath }">{{
        categoryName
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ msgs.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container sub-list">
      <ul>
        <li>
          <template v-if="msgs.brands">
            <p>品牌：</p>
            <p class="text active">全部</p>
            <div class="list-title">{{ msgs.brands[0].name }}</div>
          </template>
        </li>
        <li v-for="item in msgs.saleProperties" :key="item.id">
          <p>{{ item.name }}：</p>
          <p class="text active">全部</p>
          <div class="sub-lists" v-for="item1 in item.properties" :key="item1.id">
            <div class="lists">
              <p class="pp">{{ item1.name }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="shop-list container">
      <el-row :gutter="10">
        <template v-if="sortFields">
          <a href="#">
            <el-col :span="3" v-for="(item,index) in sortFields" :key="index">
              <div class=" grid-content bg-purple" @click="changeField(index)"
                :class="index == currentIndex ? 'active':''">{{item.name}}</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">价格排序<i class="el-icon-d-caret"></i></div>
            </el-col>
          </a>
        </template>
        <!-- <el-col :span="3">
          <div class="grid-content bg-purple">最新消息</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple">最高人气</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple">评论最多</div>
        </el-col> -->

        <el-checkbox text-color="#ffffff" v-model="checked1">仅显示有货商品</el-checkbox>
        <el-checkbox text-color="#ffffff" v-model="checked2">仅显示特惠商品</el-checkbox>
      </el-row>
      <div class="list-li">
        <ul>
          <li v-for="item in msgs.goods" :key="item.id">
            <a href="#">
              <img class="image" :src="item.picture" alt="">
              <p class="p1">{{item.desc}}</p>
              <p class="p2">{{item.name}}</p>
              <span class="price">￥{{item.price}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "subs",
  data() {
    return {
      msgs: {},
      checked1: false,
      checked2: false,
      currentIndex: 0,
      sortFields: [
        {
          name: '默认排序',
          value: ''
        },
        {
          name: '最新消息',
          value: ''
        },
        {
          name: '最高人气',
          value: ''
        },
        {
          name: '评论最多',
          value: ''
        }
      ]
    };
  },
  components: {},
  methods: {
    init(id = 1005009) {
      this.$axios.get("/category/sub/filter?id=" + id).then((res) => {
        this.msgs = res.data.result
        console.log(res)
      });
    },
    changeField(i) {
      console.log(i);
      this.currentIndex = i
    }
  },
  computed: {
    categoryPath() {
      return "/home/category?id=" + this.msgs.parentId;
    },
    categoryName() {
      return this.msgs.parentName;
    },
  },
  mounted() {
    this.init(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
.sub {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid transparent;

  .sub-title {
    margin-top: 20px;
  }

  .sub-list {
    width: 1240px;
    // height: 760px;
    overflow: hidden;
    background-color: #fff;
    margin-top: 20px;
    padding: 30px 20px 20px 10px;

    ul {
      width: 100%;
      height: 100%;
      line-height: 50px;

      li {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        float: left;

        p {
          float: left;
          color: #ccc;
          margin-left: 10px;
        }

        .text {
          color: green;
          margin-left: 30px;
          margin-right: 10px;
          cursor: pointer;
        }

        .list-title {
          margin-left: 80px;
        }

        .list-title:hover {
          // color: green;
          cursor: pointer;
        }

        div {
          float: left;
          display: flex;
          justify-content: space-between;
          margin-left: 35px;

          p {
            color: #000000;
          }

          p:hover {
            color: green;
            cursor: pointer;
          }

          .pp {
            margin-right: 36px;
            transition: all .3s;
            display: inline-block;
            max-width: 112px;
            line-height: 40px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .shop-list {
    width: 1240px;
    // height: 760px;
    overflow: hidden;
    background-color: #fff;
    margin-top: 20px;
    padding: 30px 20px 20px 10px;
    margin-bottom: 20px;
  }

  .list-li {
    width: 90%;
    margin: 0 auto;
    // background: red;
    overflow: hidden;

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5px;
      margin: 0px 0px 0px 10px;

      li {
        // width: 220px;
        // height: 260px;
        padding: 20px 10px;
        text-align: center;
        transition: all .5s;
        background: #fff;
        margin-bottom: 20px;

        a {
          color: #333;
          outline: none;
          background-color: transparent;
        }

        .image {
          width: 160px;
          height: 160px;
        }

        .p1 {
          width: 150px;
          font-size: 16px;
          padding-top: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .p2 {
          width: 150px;
          color: #999;
          height: 29px;
          padding-top: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .price {
          color: #cf4444;
          font-size: 20px;
          padding-top: 10px;
        }
      }
      li:hover {
      transform: translateY(-6px);
      -webkit-transform: translateY(-6px);
      -moz-transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
      -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
      -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
    }
    }
  }
}
</style>
<style lang="less">
.sub {
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
    cursor: pointer;
    // border: 1px solid #000000;
    margin: 0 10px;
    color: #000;
    // background: green;
    position: relative;

    .active {

      width: 100%;
      height: 100%;
      background: green;
      // padding: 10px 5px;
    }
  }

  .grid-content {
    border-radius: 4px;
    min-height: 16px;
    text-align: center;
    padding: 10px 0;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-checkbox {
    margin-left: 20px;
    margin-top: 10px;
    float: right;
    color: #ccc;
  }
}
</style>
